<template>
  <div class="callworkDialogDiv">
    <el-dialog
      append-to="callworkDialogDiv"
      v-model="dialogVisible"
      title="Tips"
      width="1600"
      class="callworkDialog"
      draggable
      :modal="false"
      :close-on-click-modal="false"
      :show-close="false"
      :fullscreen="fullscreen"
    >
      <template #header>
        <div class="flex justify-between items-center text-16px text-inherit">
          <div></div>
          <div>坐席中心</div>
          <div>
            <el-tooltip content="最小化" placement="bottom" effect="light">
              <el-icon @click="miniSize" style="cursor: pointer" size="12"><SemiSelect /></el-icon>
            </el-tooltip>
            <el-tooltip content="向下还原" placement="bottom" effect="light">
              <img
                @click="setCard('primary')"
                v-if="fullscreen"
                :src="restImg"
                alt=""
                class="h-12px w-12px ml-20px"
                style="cursor: pointer"
              />
            </el-tooltip>
            <el-tooltip content="最大化" placement="bottom" effect="light">
              <img
                @click="setCard('large')"
                v-if="!fullscreen"
                :src="LargeImg"
                alt=""
                class="h-12px w-12px ml-20px"
                style="cursor: pointer"
              />
            </el-tooltip>
            <el-tooltip content="关闭" placement="bottom" effect="light">
              <el-icon @click="close" class="ml-20px" style="cursor: pointer" size="14"
                ><Close
              /></el-icon>
            </el-tooltip>
          </div>
        </div>
      </template>
      <div :class="fullscreen ? 'callWorkBeachLarge' : 'callWorkBeach'">
        <Seating :screenWidth="screenWidth" :screenHeight="screenHeight" />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { Close, SemiSelect } from '@element-plus/icons-vue'
import log from '@/utils/log'
import Seating from '@/views/call/seating/index.vue'
import LargeImg from '@/assets/svgs/large.svg'
import restImg from '@/assets/svgs/restoredown.svg'
import { usePhoneStore } from '@/store/modules/phone'

defineOptions({ name: 'CallWorkbench' })

const dialogVisible = ref(false)
const useStore = usePhoneStore()
const fullscreen = ref(false)
const screenWidth = ref(0)
const screenHeight = ref(0)

const open = async () => {
  dialogVisible.value = true
  screenWidth.value = window.innerWidth
  screenHeight.value = window.innerHeight
}
/**最大化、向下还原*/
const setCard = (type) => {
  if (type == 'primary') {
    useStore.setCallWorkSize('primary')
    fullscreen.value = false
  } else {
    useStore.setCallWorkSize('large')
    fullscreen.value = true
  }
}
/**最小化*/
const miniSize = () => {
  useStore.setCallWorkSize('mini')
}
/**关闭*/
const close = () => {
  dialogVisible.value = false
  useStore.setCallWorkSize('none')
}
defineExpose({ open, close })
</script>
<style>
.callworkDialogDiv .callworkDialogDiv > div:first-of-type {
  inset: inherit !important;
}
</style>
<style scoped lang="scss">
.callworkDialogDiv {
  ::v-deep(.callworkDialog) {
    background: linear-gradient(to bottom, #98b0ec, #d0d5fe);
    border-radius: 10px;
  }
  ::v-deep(.el-dialog) {
    pointer-events: auto;
  }
  ::v-deep(.el-overlay-dialog) {
    right: 18px;
  }
  ::v-deep(.el-overlay-dialog) {
    pointer-events: none;
    overflow: hidden;
  }
  ::v-deep(.el-dialog__body) {
    padding: 4px;
  }
  .callworkDialog {
    ::v-deep(.el-dialog__header) {
      padding-top: 10px;
      margin-right: 0;
      background: #ecf0f390;
      border-top-right-radius: 10px;
      border-top-left-radius: 10px;
    }
  }
  ::v-deep(.el-dialog__header) {
    padding-top: 10px;
    margin-right: 0;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
  }

  ::v-deep(.el-textarea__inner::-webkit-scrollbar) {
    display: none;
  }

  ::v-deep(.el-textarea__inner) {
    padding-bottom: 30px;
    background: rgba($color: #fff, $alpha: 80%);
  }

  ::v-deep(.el-descriptions__content:not(.is-bordered-label)),
  ::v-deep(.el-descriptions__label:not(.is-bordered-label)) {
    font-size: 12px;
  }
}

::v-deep .el-descriptions__cell {
  padding-bottom: 0 !important;
}
.callWorkBeachLarge {
  height: calc(100vh - 50px);
}
.callWorkBeach {
  height: 800px;
}
@media screen and (max-width: 1600px) and (max-height: 900px) {
  ::v-deep(.callworkDialog) {
    width: 1550px !important;
  }
  .callWorkBeach {
    height: 600px !important;
  }
}
@media screen and (max-width: 1600px) {
  ::v-deep(.callworkDialog) {
    width: 1550px !important;
  }
}
@media screen and (max-width: 1280px) {
  ::v-deep(.callworkDialog) {
    width: 1200px !important;
  }
  .callWorkBeach {
    height: 600px !important;
  }
}
@media screen and (max-width: 1440px) {
  ::v-deep(.callworkDialog) {
    width: 1350px !important;
  }
  .callWorkBeach {
    height: 700px !important;
  }
}
@media screen and (max-width: 1366px) {
  ::v-deep(.callworkDialog) {
    width: 1300px !important;
  }
  .callWorkBeach {
    height: 550px !important;
  }
}
@media screen and (max-width: 1280px) {
  ::v-deep(.callworkDialog) {
    width: 1250px !important;
  }
  .callWorkBeach {
    height: 500px !important;
  }
}
@media screen and (max-width: 1176px) {
  ::v-deep(.callworkDialog) {
    width: 1150px !important;
  }
  .callWorkBeach {
    height: 480px !important;
  }
}
@media screen and (max-width: 1024px) {
  ::v-deep(.callworkDialog) {
    width: 1000px !important;
  }
  .callWorkBeach {
    height: 480px !important;
  }
}
@media screen and (max-width: 800px) {
  ::v-deep(.callworkDialog) {
    width: 750px !important;
  }
  .callWorkBeach {
    height: 400px !important;
  }
}
.callWorkBeach,
.callWorkBeachLarge {
  overflow-x: hidden;
  overflow-y: auto;
  border-radius: 4px;
  &::-webkit-scrollbar {
    width: 2px;
  }
  &::-webkit-scrollbar-track {
    background: #f1f1f1;
  }
  &::-webkit-scrollbar-thumb {
    background: #d8d8d8;
  }
  &::-webkit-scrollbar-thumb:hover {
    background: #d8d8d8;
  }
  &::-webkit-scrollbar-thumb:horizontal:start {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }
  &::-webkit-scrollbar-thumb:horizontal:end {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
</style>
